<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Your Keyword</title>
	
    <meta http-equiv="keywords" content="keywords,project,time,historyline">
    <meta http-equiv="description" content="Keywords Project">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<!--<script type="text/javascript" src="/js/jquery-1.3.1.js"></script>-->
	<!-- use google ajax api -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	  // Load jQuery
	  google.load("jquery", "1.3.2");
	
	  google.setOnLoadCallback(function() {
	  			init();
	  });
	</script>
	<script type="text/javascript">
		var keywords = [];
		function init(){
			$(document).ready(function(){
				retrieveKeywords();
			});
		}
		function submitKeyword(){
		
			var keyword = encodeURI($("#keyword").val());
			var tag 	= encodeURI($("#tag").val());
			var level 	= encodeURI($("#level").val());
			var url 	= "/addKeyword?keyword=" + keyword
							+ "&tag=" + tag
							+ "&level=" + level;
			$.ajax({
				url : url,
				type : 'GET',
				dataType : 'text',
				timeout : 5000,
				error : function(msg){
					alert("error" + msg);
				},
				success : function(){
					refreshKeywords();
				}
				
			});
			
		}
		function refreshKeywords(){
			$("#keywords").hide("fast");
			$("#keywords").html("");
			retrieveKeywords();
			$("#keywords").show("fast");
		}
		function Keyword(time, keyword, tag, level){
			var time = time;
			var keyword = keywords;
			var tag = tag;
			var level = level;
		}
		
		function retrieveKeywords(){
			$.ajax({
				url : "/getKeywords",
				type : "GET",
				dataType : "xml",
				timeout : 5000,
				error : function(msg){
					alert("retrieve Error!");
				},
				success : function(xml){
					//transform xml into keywords
					$(xml).find("keyword").each(function(){
						var timeStr = $(this).find("time").text();
						var keywordStr = $(this).find("name").text();
						var tagStr = $(this).find("tag").text();
						var levelStr = $(this).find("level").text();
						var html = $("#keywords").html();
						html += "<li>";
						html += "<span class='time'>" + timeStr + "</span>";
						html += "<span class='name'>" + keywordStr + "</span>";
						html += "<span class='tag'>tag : " + tagStr + "</span>";
						html += "<span class='level'>level : " + levelStr + "</span>";
						html += "<a href='javascript:void(0)' onclick='deleteKeyword(" + $(this).find("id").text() + ");'>delete</a>" + "<br />";
						html += "</li>";
						//alert(html);
						$("#keywords").html(html);
					});
				}
			});
		}
		function deleteKeyword(id){
			$.ajax({
				url : "deleteKeyword?id=" + id,
				type : "GET",
				dataType : "text",
				timeout : 5000,
				error : function(msg){
					alert(msg);
				},
				success : function(msg){
					alert(msg);
					refreshKeywords();
				}
			});
			//send message to delete thd keyword of id
		}
		function alert(msg){
			$("#MsgBox").html(msg);
		}
	</script>
<style type="text/css">
ul{
	width: 80%;
}
li{
	cursor:pointer;
	width : 100%;
	margin: 1em;
	background-color:#97CBFF;
}
li:hover{
	background-color:#3399FF;
}
.time{
	width : 50%;
	margin-right:2em;
}
.name{
	font-size: large;
	margin:2em;
}
.tag{
	color:white;
	background-color:gray;
	border-color:white;
	font-size:small;
	margin-right:2em;
}
.level{
	position:relative;
	right:1px;
	color:orange;
}
</style>
  </head>
  
  <body>
    Hello, welcome you!<br>
    <h3>Message</h3>
    <div id="MsgBox">None Now</div>
    <h1>Submit new Keyword</h1>
    <form>
    	Keyword : <input type="text" id="keyword" name="keyword" value="sleep" >
    	Tag : <input type="text" id="tag" name="tag" value="life" >
    	Level : <input type="text" id="level" name="level" value="Day-Level" >
    	<input type="button" value="Submit" onclick="submitKeyword()" >
    </form>
    <div><a href="/getKeywords">getKeywords</a></div>
    <h2>All Keywords</h2>
    <ul id="keywords"></ul>
  </body>
</html>
